<template>
    <div id="link-manager" class="hide">

        <div>
            <!-- <el-dialog title="链接管理器" :visible="linkManagerVisible" width="600px" :before-close="close" center> -->
            <el-dialog title="链接管理器" v-model="linkManagerShow" width="600px" :before-close="close" center>

                <el-container style="height: 500px; border: 1px solid #eee">

                    <el-aside width="200px">

                        <el-card class="link-list">
                            <div slot="header" class="clearfix">
                                <span>链接名称</span>
                            </div>
                            <ul>
                                <li v-for="(item, index) in link_dict" :key="index"
                                    v-bind:class="{ 'active': checked_link && checked_link.key == item.key }"
                                    v-on:click="check_link(item)">
                                    {{ item.title }}
                                </li>
                            </ul>
                        </el-card>

                    </el-aside>

                    <el-container>

                        <el-card class="link-detail">
                            <div slot="header" class="clearfix">
                                <span v-if="!checked_link">请选择链接</span>
                                <span v-if="checked_link">选中的链接：</span>
                                <span v-if="checked_link">{{ checked_link.title }}</span>
                            </div>
                            <el-form ref="form" label-width="80px">

                                <div v-if="checked_link && checked_link.params">
                                    <el-form-item
                                        v-if="checked_link.key != 'article' && checked_link.key != 'category' && checked_link.key != 'diy'"
                                        :label="item.title" v-for="(item, param_key) in checked_link.params"
                                        :key="param_key">
                                        <el-input v-model="item.value"></el-input>
                                    </el-form-item>

                                    <template v-if="checked_link.key == 'category'">

                                        <el-form-item label="类型">
                                            <el-radio-group v-on:change="changeCategoryType"
                                                v-model="checked_link.params.category_id.key">
                                                <el-radio value="category" label="category_id">分类</el-radio>
                                                <el-radio value="brand" label="brand_id">品牌</el-radio>
                                            </el-radio-group>
                                        </el-form-item>

                                        <el-form-item label="分类"
                                            v-if="checked_link.params.category_id.key == 'category_id'">
                                            <el-select v-model="checked_link.params.category_id.value" filterable
                                                placeholder="请选择">
                                                <el-option v-for="category in category_list" :key="category.id"
                                                    :label="category.name" :value="category.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item label="品牌" v-if="checked_link.params.category_id.key == 'brand_id'">
                                            <el-select v-model="checked_link.params.category_id.value" filterable
                                                placeholder="请选择">
                                                <el-option v-for="brand in brand_list" :key="brand.id" :label="brand.name"
                                                    :value="brand.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>

                                    </template>


                                    <el-select v-if="checked_link.key == 'article'"
                                        v-model="checked_link.params.article_id.value" filterable placeholder="请选择">
                                        <el-option v-for="article in article_list" :key="article.id" :label="article.title"
                                            :value="article.id">
                                        </el-option>
                                    </el-select>

                                    <el-select v-if="checked_link.key == 'diy'" v-model="checked_link.params.diy_id.value"
                                        filterable placeholder="请选择">
                                        <el-option v-for="diy in diy_list" :key="diy.id" :label="diy.title" :value="diy.id">
                                        </el-option>
                                    </el-select>
                                </div>



                            </el-form>
                        </el-card>

                    </el-container>

                </el-container>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="close()">取 消</el-button>
                    <el-button type="primary" @click="done()">确 定</el-button>
                </div>

            </el-dialog>
        </div>


    </div>
</template>

<script lang="ts" setup>
import { init } from 'snabbdom';
import { ref, defineProps, watch, defineEmits, onMounted } from 'vue'
import axios from 'axios';
const emit: any = defineEmits();
interface Props {

    // FileManagerData: any
    // visible: any
    link_visible: any
    link_object: any
}

const {
    link_visible,
    link_object
} = defineProps<Props>()

// const url_pre = ref('')
const VITE_URL = window.VITE_URL;
const linkManagerShow = ref(false)
// const linkManagerVisible = ref(true)
const checked_link = ref(null)
const article_list = ref([])
const category_list = ref([])
const brand_list = ref([])
const diy_list = ref([])
const link_dict = ref({
    home: {
        title: '首页',
        key: 'home',
    },
    cart: {
        title: '购物车',
        key: 'cart',
    },
    category: {
        title: '分类页面',
        key: 'category',

        params: {
            // brand_id:{
            //     title:'品牌ID',
            //     key:'brand_id',
            //     value:''
            // },
            category_id: {
                title: '分类ID',
                key: 'category_id',// category_id or brand_id(分类 或 品牌)
                value: ''
            }
        }
    },
    // category_list: [],
    // brand_list: [],
    product: {
        title: '商品详情',
        key: 'product',
        params: {
            product_id: {
                title: '商品ID',
                key: 'product_id',
                value: ''
            }
        },
    },
    // article_list: [],
    // diy_list: [],
    article: {
        title: '文章详情',
        key: 'article',
        params: {
            article_id: {
                title: '文章ID',
                key: 'article_id',
                value: ''
            }
        },
    },
    customer: {
        title: '用户中心',
        key: 'customer',
    },
    order: {
        title: '订单列表',
        key: 'order',
    },
    box: {
        title: '盲盒',
        key: 'box',
    },
    diy: {
        title: '自定义页面',
        key: 'diy',
        params: {
            diy_id: {
                title: '自定义页面ID',
                key: 'diy_id',
                value: ''
            }
        },
    }
    ,xcx:{
        title:'外部小程序',
        key:'xcx',
        params:{
            app_id:{
                title: '小程序APPID',
                key: 'app_id',
                value: ''
            }
        }
    }
    ,free:{
        title:'任意路径',
        key:'free',
        params:{
            path:{
                title: '页面路径',
                key: 'path',
                value: ''
            }
        }
    }
})

const close = (close_data: any) => {

    // fileManagerVisible.value = false;  // 移植过来的语句， 看起来是错误语句，(也可能是为了关闭文件选择面板) 先注释掉
    linkManagerShow.value = false;
    var data = {
        visible: 0
    };
    emit('express', close_data ? close_data : data);
}

const done = () => {

    if (checked_link.value.params) {

        for (var p in checked_link.value.params) {
            var item = checked_link.value.params[p];
            if (typeof item.value == 'string') {
                item.value = item.value.replace(/^(\s+)|(\s+)$/g, '');
            }

            if (!item.value) {
                alert('请填写参数:' + item.title);
                return;
            }
        }
    }
    var link_str = JSON.stringify(checked_link.value);
    var link_obj = JSON.parse(link_str);
    var data = {
        visible: 0,
        link: link_obj
    };
    close(data);
}
const check_link = (item: any) => {

    checked_link.value = item;
}

const get_article_list = () => {

    // var url = url_pre + '&r=diy.article';
    let url = VITE_URL + '/admin.design.diy/article';
    article_list.value = [];
    url += '?status=1';
    axios.get(url).then(function (res: any) {
        res.data.forEach(function (item: any) {
            item.label = item.title;
            item.key = item.id;
            article_list.value.push(item);
        });
    });

}

const get_category_list = () => {

    // var url = url_pre + '&r=diy.category';
    let url = VITE_URL + '/admin.design.diy/category';
    category_list.value = [];
    url += '?status=1';
    axios.get(url).then(function (res: any) {
        res.data.forEach(function (item: any) {
            item.label = item.title;
            item.key = item.id;
            category_list.value.push(item);
        });
    });
}

const get_brand_list = () => {

    // var url = url_pre + '&r=diy.brand';
    let url = VITE_URL + '/admin.design.diy/brand';
    brand_list.value = [];
    url += '?status=1';
    axios.get(url).then(function (res: any) {
        res.data.forEach(function (item: any) {
            item.label = item.title;
            item.key = item.id;
            brand_list.value.push(item);
        });
    });
}

const get_diy_list = () => {

    // var url = url_pre + '&r=diy.diy';
    let url = VITE_URL + '/admin.design.diy/diy';
    diy_list.value = [];
    url += '?status=1';
    axios.get(url).then(function (res: any) {
        res.data.forEach(function (item: any) {
            item.label = item.title;
            item.key = item.id;
            diy_list.value.push(item);
        });
    });
}
const changeCategoryType = () => {
    var type = checked_link.value.params.category_id.key;
    checked_link.value.params.category_id.title = type == 'category_id' ? '分类ID' : '品牌ID';
    checked_link.value.params.category_id.value = '';
}

onMounted(() => {

    get_article_list();
    get_category_list();
    get_brand_list();
    get_diy_list();


})

watch(() => link_visible, (newVal: any, oldVal: any) => {

    // console.log('watch:', newVal, oldVal)
    linkManagerShow.value = newVal.show;
}, { immediate: true, deep: true })

watch(() => link_object, (newVal: any, oldVal: any) => {

    console.log('watch:', newVal, oldVal)

    let str = JSON.stringify(newVal);

    check_link(JSON.parse(str))

}, { immediate: true, deep: true })

</script>

<style>
.link-list {

    /*padding:10px;*/
    height: 100%;
}

.link-list li {

    margin: 10px 0;
    cursor: pointer;

}

.link-list li.active {
    background-color: #d2d4ff;
}

.link-detail {
    width: 100%;
}
</style>